<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        a{
            text-decoration: none;
            color: #fff;
            font-size: 12px;
        }
        .header{
            width:1349px;
            height:44px;
            line-height: 44px;
            background:black;
            box-sizing: border-box;
        }
        .header-left{
            float:left;
            width:20%;
            height:44px;
            box-sizing: border-box;
        }

        .header-mid{
            float:left;
            width:60%;
            height:44px;
        }
        .header .header-mid .header-nav{
                  float: left;
                  list-style: none;
              }
        .header .header-mid .header-nav li{
            float: left;
            padding: 0 20px;
        }
        .header-right{
            float:right;
            width:20%;
            height:44px;
             }
        .header .header-right{
            float: rigt;
            width: 200px;
            height: 30px;
            line-height: 1px;
            margin-top: 12px;
            font-size: 10px
            border-radius: 5px;
            overflow: hidden;
            right: 15px;
        }

        .main{
            width:1349px;
            height:846px;
            background-image:url("image/vivo-banner-nexys-bg.jpg");
        }
        .main .main-bg{
            width:1349px;
            height:606px;

        }
        .main .main-bg .main-bgleft{
            float: left;
            width:300px;
            height:261px;
            margin: 200px 200px 60px 125px;
        }
        .main .main-bg .main-bgright{
            float:right;
            width:450px;
            height:540px;
            margin: 50px 180px 0px 12px;
            display: inline-block;
        }
        .main .main-bg .main-bgright .img1{
            display: inline-block;
            text-align: center;
        }
        .main .main-bg .main-bgright .img2{
            display: inline-block;
            text-align: center;
        }
        .main .main-bg .main-bgleft .img3{
            display: inline-block;
            text-align: center;

        }
        .main .main-bg .main-bgleft .img4{
            display: inline-block;
            text-align: center;
        }
        .main .main-bg .main-bgleft span{
            text-align: center;
            display: inline-block;
        }
        .main .main-up{
            width:1349px;
            height:240px;
            background: #000;
        }

        .footer{
            width:1349px;
            height:360px;
            background: white;
        }
        .footer .footer-up{
            width:1200px;
            height:260px;
            margin:0 auto;
        }
        .footer .footer-up .footer-upone{

            display: block;
            width: 1200px;
            height: 320px;
            margin: 0 auto;
        }
        .footer .footer-up .footer-upone dl{
            float: left;
            margin-right: 100px;

        .footer .footer-up .footer-upone .dl dt{
            line-height: 40px;
            font-size: 14px;
            color: #F2F2F2;
        }
        .footer .footer-up .footer-upone.dl .dt dd{
            line-height: 30px;
            font-size: 14px;
            color: #F2F2F2;
        }
        .footer .footer-up footer-uptwo{
            display: block;
            width: 240px;
            height: 88px;
            margin: 0 auto；
        }
        .footer .footer-up .footer-uptwo p{
          float:right;
            display:inline-block;
        }
        .footer footer-under{
            width:1200px;
            height:79px;
            background:blueviolet;
            margin:0 auto;
        }


    </style>
</head>
<body>
<div class="header">
    <div class="header-left"></div>
    <div class="header-mid">
    <ul class="header-nav">
        <li><a href="#">NEX系列</a></li>
        <li><a href="#">X系列</a></li>
        <li><a href="#">Z系列</a></li>
        <li><a href="#">Y系列</a></li>
        <li><a href="#">商城</a></li>
        <li><a href="#">体验店</a></li>
        <li><a href="#">Funtouch OS</a></li>
        <li><a href="#">服务</a></li>
        <li><a href="#">社区</a></li>
    </ul>
    </div>
    <div class="header-right">
        <a href="#"><img src="image/search.png"></a>
    </div>
    </div>
<div class="main">
    <div class="main-bg">
        <div class="main-bgleft">
            <img class="img3" src="image\vivo-banner-nexys-title1-small.png">
            <img class="img4" src="image\vivo-banner-nexys-title2-small.png">
            <img class="img5" src="image\vivo-banner-nexys-title3-small.png">
            <span>查看详情</span>
        </div>
        <div class="main-bgright">
            <img class="img1" src="image\vivo-banner-nexys-figure2-small.png">
            <img class="img2" src="image\vivo-banner-nexys-figure3-small.png">
        </div>
    </div>
     <div class="main-up">

     </div>
</div>
<div class="footer">
    <div class="footer-up">
        <div class="footer-upone">
            <dl>
            <dt>热门链接</dt>
            <dd>X23</dd>
            <dd>X系列</dd>
            <dd>Xplay系列</dd>
            <dd>vivo摄影</dd>
            <dd>查找手机</dd>
            <dd>常见问题</dd>
        </dl>
            <dl>
                <dt>热门链接</dt>
                <dd>X23</dd>
                <dd>X系列</dd>
                <dd>Xplay系列</dd>
                <dd>vivo摄影</dd>
                <dd>查找手机</dd>
                <dd>常见问题</dd>
            </dl>
            <dl>
                <dt>热门链接</dt>
                <dd>X23</dd>
                <dd>X系列</dd>
                <dd>Xplay系列</dd>
                <dd>vivo摄影</dd>
                <dd>查找手机</dd>
                <dd>常见问题</dd>
            </dl>
            <dl>
                <dt>热门链接</dt>
                <dd>X23</dd>
                <dd>X系列</dd>
                <dd>Xplay系列</dd>
                <dd>vivo摄影</dd>
                <dd>查找手机</dd>
                <dd>常见问题</dd>
            </dl>
            <dl>
                <dt>热门链接</dt>
                <dd>X23</dd>
                <dd>X系列</dd>
                <dd>Xplay系列</dd>
                <dd>vivo摄影</dd>
                <dd>查找手机</dd>
                <dd>常见问题</dd>
            </dl>
            </div>
        </div>
        <div class="footer-uptwo">
            <p> 在线客服</p>
            <p>400-678-9688</p>
            <p>24小时全国服务热线</p>

        </div>
    </div>
        <div class="footer-under"></div>

</div>

</body>
</html>